<template>
	<view class="coupon-box">
		<view class="coupon-face">
			<view class="face">
				<view class="price">15</view>
				<view class="full">满200元可用</view>
			</view>
		</view>
		<view class="coupon-info">
			<view class="title">通用代金券</view>
			<view class="writer">全场可用</view>
			<view class="time">2019.06.14 - 2019.12.12</view>
			<view class="number">剩余10张</view>
			<button class="cu-btn">立即使用</button>
		</view>
	</view>
</template>

<script>
	
	
</script>

<style lang="scss" scoped>
	.coupon-box{
		border-radius: 20upx;
		overflow: hidden;
		margin: 40rpx;
		background-color: #FFFFFF;
		display: flex;
		box-shadow: 1px 1px 10px $border-color-dark;
		.coupon-face{
			color: #fff;
			width: 200upx;
			height: 200upx;
			background-color: $base-color;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.price{
				font-weight: 700;
				font-size: 28px ;
				&::before{
					content: '￥';
					font-weight: 400;
					font-size: 12px ;
				}
			}
			&::after,
			&::before{
				content: '';
				border-radius: 50%;
				position: absolute;
				right: -13rpx;
				width: 26rpx;
				height: 26rpx;
				background-color: #e9ebee ;
			}
			
			&::before{
				top: -13rpx;
			}
			&::after{
				bottom: -13rpx;
			}
		}
		.coupon-info{
			flex: 1;
			padding-top: 40rpx;
			margin-left: 30rpx;
			color: #c7c7c7;
			font-size: 12px;
			position: relative;
			.title{
				font-size: 15px;
				color: #000;
				font-weight: 700;
				margin-bottom: 8rpx;
			}
			.writer{
				color: #999;
			}
			.cu-btn{
				position: absolute;
				height: 54rpx;
				right: 20rpx;
				top: 40rpx;
				padding: 0 20rpx;
				background-color: $base-color;
				color: #fff;
			}
			.time{
				position: absolute;
				left: 0;
				top: 146rpx;
			}
			.number{
				position: absolute;
				right: 20rpx;
				top: 140rpx;
			}
		}
	}
</style>
